<!--
 * @description: 
 * @Date: 2023-03-23 11:15:42
 * @example: 
 * @params: 
-->
<template>
  <div ref="echartsDom" style="width: 100vw; height: 600px"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { Ref, ref, onMounted } from "vue";


/** prop  */
const props = defineProps({
  tableData:{
    type:Object,
    default() {
      return []
    }
  }
})
const FormatterTime = (timestamp) => {
  let date = new Date(parseInt(timestamp));
  let Year = date.getFullYear();
  let Moth =
    date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1;
  let Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  let Hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  let Minute =
    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  let Sechond =
    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  let GMT =
    Year + "-" + Moth + "-" + Day + "   " + Hour + ":" + Minute + ":" + Sechond;
  return GMT;
};

//3.获取定义的Dom模板
const echartsDom: Ref<HTMLElement | any> = ref(null);
//4.在组件挂载的生命周期中获取到DOm节点
onMounted(() => {

  // console.log("PROPS 数据 ",props.tableData)
  const dataSource = props.tableData
  const Xserise = dataSource.map((item)=>{
    return FormatterTime(item.timestamp) 
  })
  const TempData = dataSource.map((item)=>{
    return item.temperature
  })
  const HumiData = dataSource.map((item)=>{
    return item.humidity
  })
  const BerryData = dataSource.map((item)=>{
    return item.battery
  })

  //5.创建echarts初始化对象
  const myEcharts = echarts.init(echartsDom.value);
  //6.校验表结构是否存在,存在就渲染
  const options = {
    title: {
      text: "EM300-ZLD 24H DATA CHANGEING",
      top:"",
      left:"20%"
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["temperature", "humidity", "battery"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: Xserise
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "temperature",
        type: "line",
        stack: "Total",
        data: TempData,
      },
      {
        name: "humidity",
        type: "line",
        stack: "Total",
        data: HumiData,
      },
      {
        name: "battery",
        type: "line",
        stack: "Total",
        data: BerryData,
      },
    ],
  };
  options && myEcharts.setOption(options);
});
</script>

<style scoped lang="less">
</style>
